<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/login.css">
</head>

<body>
  <div>
    
    <div class="row align-items-center">
      <div class="col"></div>
      <div class="col">
        <div class="alert alert-danger text-center invisible" role="alert"
          style="width: 42rem;background: rgba(156, 152, 152, 0.5)">
          <strong>提示：</strong>
          <font id="msgId" style="color: #000;">这里有一些错误，看着就好</font>
        </div>
      </div>
      <div class="col"></div>
    </div>
    <div class="card"
      style="width: 50rem;margin: auto; margin-top: 10rem;height: 28rem;background: rgba(156, 152, 152, 0.5)">
      <form id="updateForm" style="background: rgba(156, 152, 152, 0.5);">
        <h5 class="card-title" style="text-align: center;">更改密码页面</h5>
        <div class="form-group">
          <label for="exampleInputEmail1">用户名：</label>
          <input type="text" style="background: rgba(156, 152, 152, 0.5);" class="form-control"
            aria-describedby="emailHelp" id="username" name="username" placeholder="username">

        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">旧密码：</label>
          <input type="password" style="background: rgba(156, 152, 152, 0.5);" class="form-control" id="password"
            name="password" placeholder="password">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">新密码：</label>
          <input type="password" style="background: rgba(156, 152, 152, 0.5);" class="form-control" id="newpassword"
            name="newpassword" placeholder="newpassword">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">确认密码：</label>
          <input type="password" style="background: rgba(156, 152, 152, 0.5);" class="form-control" id="confirmPassword"
            name="confirmPassword" placeholder="confirmPassword">
        </div>
        <button type="button" class="btn" style="width: 7rem;" onclick="update()">更改</button>
        <button type="button" class="btn" style="width: 7rem;" onclick='returns()'>取消</button>
      </form>
    </div>
  </div>

  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script>
    function update() {
      axios({
        method: 'post',
        url: '/updatePasswordDone',
        data: $('#updateForm').serialize()
      }).then(function (response) {
        let res = response.data;
        if (res.code == 200) {
          alert('修改成功');
          window.location.href = '/'
        }
        else {
          alert_fn(res.msg);
          console.log(res.msg);
        }
      })
    }
    function returns() {
      window.location.href = '/information'
    }
    function alert_fn(msg) {
      $('#msgId').text(msg);
      $('.alert').removeClass('invisible');
      setTimeout(() => {
        $('.alert').addClass('invisible');
      }, 3000);
    }
  </script>
</body>

</html>